<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部容器：背景色、高度、内容字体大小 -->
            <el-header style="background-color: gray;height: 60px;font-size: 25px;align-items: center;">
             
                <div style="float: left;margin-top: 10px;align-items: center;display: flex;">
                    <el-icon style="margin-right: 10px;">
                        <Grid />
                    </el-icon>智慧城市
                </div>
              
                <div style="float: right;margin-top: 10px;align-items: center;">
                    <el-icon style="margin-right: 10px;">
                        <UserFilled />
                    </el-icon>
                    <el-icon style="margin-left: 50px;">
                        <SwitchButton />
                    </el-icon>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px" style="height: 700px;background-color: #ccc">
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose" router>
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                <span>管理信息</span>
                            </template>
                         
                            <el-menu-item index="/li">显示信息</el-menu-item>
                        
                            <el-menu-item index="/map">地图</el-menu-item>
                            <el-menu-item index="/tree">树形</el-menu-item>
                            <el-menu-item index="/ky">添加</el-menu-item>
                        </el-sub-menu>

                    </el-menu>
                </el-aside>
                <el-main>
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { RouterView } from 'vue-router'
import {
    SwitchButton,
    UserFilled,
    Grid,
    Location,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>